<template>

  <div id="div-tabs">
    <el-tabs v-model="activeName" class="tabs_left">
      <el-tab-pane :label="item.label + '(' +item.data+')'" :name="item.name" v-for="(item ,index) in data"
                   :key="index">
        <div style="overflow-x: hidden">
          <el-row :gutter="30">

            <el-col :xs="12" :sm="8" :lg="6" v-for="(count ,index) in item.data" :key="index">

              <el-card class="box-card-left">
                <div class="left_top_tip  font11" :style="{background:item.color}">{{item.label}}</div>
                <span class="span-h2">2021青岛西海岸马拉松</span>
                <el-row>

                  <el-row class="div-center  mt15">

                    <img src="../../assets/images/photos.jpg" class="activeimg">
                  </el-row>

                  <el-row class="mt6   div-center">
                    <div class="details">
                      <span class="font15  left"> 赛事未发布</span>
                      <span class="font15  right  lin21 text-center">  <span
                        class="el-icon-location  font15 "></span>江苏·南京 </span>
                    </div>

                  </el-row>
                  <el-row class="mt6   div-center">
                    <div class="details">
                      <div>
                        <span class="font13" style="font-weight: 300">竞赛时间 2021-05-09</span>
                      </div>
                      <el-row class="mt20">
                        <el-col :span="8" style="text-align: left">
                          <span>规定人数</span>
                          <br>
                          <span>5，000</span>
                        </el-col>
                        <el-col :span="8" style="text-align: center">
                          <span> 已报名人数</span>
                          <br>
                          <span>5，000</span>
                        </el-col>
                        <el-col :span="8" style="text-align: right">
                          <span>剩余名额</span>
                          <br>
                          <span>5，000</span>
                        </el-col>

                      </el-row>
                    </div>


                  </el-row>
                  <el-row class="mt6   div-center">
                    <div>
                      <el-divider class="details"></el-divider>
                      <div class="div-center">
                        <el-button type="text" class="font13">查看详情</el-button>
                      </div>
                    </div>

                  </el-row>
                </el-row>


              </el-card>

            </el-col>

          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="label" disabled>

      </el-tab-pane>
    </el-tabs>
  </div>


</template>

<style>

  #div-tabs .el-tabs__item.is-disabled {
    width: 88px;
    height: 20px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 25px;
    color: #43425D;
    opacity: 0.8;
  }

  .el-tabs__item {

    color: #A1A0AE;
  }

  .tabs_left .el-tabs__content {

    height: 100%;

  }

  .tabs_left .el-tab-pane {
    height: 100%;
  }

  .div-center .el-divider--horizontal {

    margin: 16px 0 0 0;
  }
</style>

<script>
  export default {
    name: "TabPaneLab",
    props: {
      data: {

        type: Array,
        required: true
      }
    },

    mounted() {
      this.label = "总计：" +this.getCount() +"场";
    },
    data() {
      return {
        countnumber: '2000',
        number: '500',
        activeName: 'first',
        label: "总计：264场",
      }
    },
    methods: {

      getCount() {
        var count = 0;
        for (let i = 0; i < this.data.length; i++) {
          count += this.data[i].data
        }
        return count;

      }

    }
  }
</script>

<style>
  .tabs_left {
    color: #000000;
    cursor: pointer;
  }

  .tabs_left .el-tabs__active-bar {
    background-color: #3B86FF;
    font-size: 15px;

  }

  .tabs_left .el-tabs__item.is-active {
    color: #3B86FF;
  }

  .box-card-left .el-card__body {
    padding: 0;

  }
</style>
<style scoped>

  .details {
    width: 331px;
  }

  .activeimg {
    width: 331px;
    height: 124px;;

    border-radius: 16px;
    background-size: cover;
  }

  .div-center {
    display: flex;
    justify-content: center;

  }

  .left_top_tip {
    margin: 0;
    padding: 0;
    width: 53px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    border-radius: 0px 0px 10px 0px;
    text-align: center;
    display: inline-block;
    color: #FFFFFF;
  }

  .number {
    color: #F1C40F;
  }

  .span-h2 {
    font-size: 17px;
    font-family: Source Sans Pro;
    color: #282D30;
    margin: 0 0 0 10px;

    padding: 0;
    font-weight: 700;
  }

  .mt34 {
    margin: 30px 0 0 0;
    padding: 0;
    line-height: 1;
  }

  .span-date,
  .span-content {
    font-size: 16px;
    color: #666666;
    padding: 0;
    margin: 0;
    font-family: Microsoft YaHei;
  }

  .box-card-left {
    height: 363px;
    padding: 0;
    margin-bottom: 24px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;


  }


  .tabs-card-right-textAndIcon {

    font-size: 20px;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 187px;
    max-height: 187px;;
    color: #282D30;
  }
</style>
